// js追加图片循环打印图片
let cols = [
    {left:0, top: 0},
    {left:254, top: 0},
    {left:254*2, top: 0},
    {left:254*3, top: 0},
]
let videoHeight = 0
// 循环打印1-56张
function Waterfall()
{
    for (let num=1; num<=56; num++) 
    {
// 造li
    let liObj=document.createElement('li')
    // 定位，为瀑布流做铺垫
    liObj.style.position = 'absolute'
        liObj.style.display = 'none'
    // 给liObJ的标签加内容
    liObj.innerHTML=`
    <div>
    <img src="./assets/imgs2/${num}.jpg" alt="">
    </div>
<span>${num}初秋絮语，用音乐记下你的点点滴滴</span>
<p>
                <i class="iconfont icon-aixin"></i>${num}${num}.6w喜欢
            </p>
    `
    // 把造的li追加到ul中去
    document.querySelector('.video ul').appendChild(liObj)


// 更改图片的位置

        liObj.querySelector('img').onload = function() {
            let minHeightIndex =  0
            cols.forEach((item,i) => {
                if (cols[minHeightIndex].top > item.top)
                {
                    minHeightIndex = i
                }
            })
            liObj.style.display = 'block' 
            liObj.style.left = cols[minHeightIndex].left + 'px'
            liObj.style.top = cols[minHeightIndex].top + 'px'
            cols[minHeightIndex].top += liObj.offsetHeight    // 留心：上面已经把图片加载到页面但是不以为着图片已经加载完毕 所以获取不到最新图片高度
            
            // 记录最后一个图片的top位置
            videoHeight = cols[minHeightIndex].top
        }
    }
}


// JS无限滚动
// 监控滚动条变化
// 获取默认可见视口宽度+滚动条高度
window.onscroll = function() {
    let clientHeight = window.innerHeight || document.documentElement.clientHeight
    let scrollHeight = document.documentElement.scrollTop || document.body.scrollTop 

    if (clientHeight + scrollHeight >= videoHeight)
    {
        console.log(`%c 第${document.querySelectorAll('.video li').length/56}次追加`, 'color:red;font-size:25px;')
        console.log(`%c 第${document.querySelectorAll('.video li').length/56}次追加`, 'color:red;font-size:25px;')
        console.log(`%c 第${document.querySelectorAll('.video li').length/56}次追加`, 'color:red;font-size:25px;')
        console.log(`%c 第${document.querySelectorAll('.video li').length/56}次追加`, 'color:red;font-size:25px;')
        console.log(`%c 第${document.querySelectorAll('.video li').length/56}次追加`, 'color:red;font-size:25px;')
        
        Waterfall()
    }
}

// window.onload = Waterfall
window.addEventListener('load', Waterfall)


// 短视屏播放，遮罩框
// 获取视屏区ul,绑定点击事件
// 短视频播放
// pause暂停
document.querySelector('.video ul').onclick = function() {
    document.body.style.overflow = 'hidden'
    document.querySelector('.video-wrapper').style.display = 'block'
}
document.querySelector('.video-wrapper .close').onclick = function() {
    document.body.style.overflow = 'auto'
    document.querySelector('.video-wrapper').style.display = 'none'

    document.querySelector('.video-wrapper video').pause()
}
    
